<%-- 
    Document   : register
    Created on : Oct 26, 2012, 7:05:45 PM
    Author     : chickencake1
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/tlds/RandomCharacters_Tag.tld" prefix="generate" %>
<%@taglib prefix="user" uri="/WEB-INF/tlds/CustomTag_1.tld" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" type="text/css" href="register-contentJSP.css"/>
        <jsp:useBean id="conf" class="Model.ObjectBean.RequestBean.confirm" scope="session"/>
        <jsp:useBean id="register" class="Model.ObjectBean.RequestBean.BeanRegister" scope="session"/>
        
        
        <script type="text/javascript">
            function isempty(id,valid_id)
            {
                var t=document.getElementById(id).value;
                if(t!="")
                    document.getElementById(valid_id).src="Resources/checked.jpg";
                else
                    document.getElementById(valid_id).src="Resources/unchecked.jpg";
            }

           function limit_text(limitField,limitNum)
            {
                if(limitField.value.length>limitNum)
                    {
                        limitField.value=limitField.value.substring(0,limitNum-1);
                    }
            }
            
            function isInrange(id,min,max,valid_id)
            {
                var x=document.getElementById(id).value;
                var minn=min;
                var maxx=max;
                if(x.length<minn || x.length>maxx)
                    document.getElementById(valid_id).src="Resources/unchecked.jpg";
                else
                    document.getElementById(valid_id).src="Resources/checked.jpg";
            }
            
            function isInrange_ver1(id,min,max)
            {
                var x=document.getElementById(id).value;
                var minn=min;
                var maxx=max;
                if(x.length<minn || x.length>maxx)
                    return false;
                else
                    true;
            }
            
            
            function checkEmail(id,valid_id)
            {
                emailRegExp = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.([a-z]){2,4})$/;
                if(emailRegExp.test(document.getElementById(id).value))
                    document.getElementById(valid_id).src="Resources/checked.jpg";
                else
                    document.getElementById(valid_id).src="Resources/unchecked.jpg";
            }
            
            function checkRetype(id1,id2,valid_id)
            {
                if(document.getElementById(id1).value==document.getElementById(id2).value)
                    document.getElementById(valid_id).src="Resources/checked.jpg";
                else
                    {                       
                    document.getElementById(id2).value="";
                    document.getElementById(valid_id).src="Resources/unchecked.jpg";
                    }
            }
            function check_RealYear(id,valid_id)
            {
                numbericExpression = /^[0-9]+$/;
                var birthyear=document.getElementById(id).value;
                var d=new Date();
                var now=d.getFullYear();
                var distance=now-birthyear;
                if(numbericExpression.test(document.getElementById(id).value))
                    {
                    if(distance<10 || distance >100)
                        {
                       document.getElementById(valid_id).src="Resources/unchecked.jpg"; 
                       document.getElementById(id).value="";
                        }
                    else
                        {
                            document.getElementById(valid_id).src="Resources/checked.jpg";
                        }
                    }
                    else
                        {
                       document.getElementById(valid_id).src="Resources/unchecked.jpg"; 
                       document.getElementById(id).value="";
                        }
                        
                    
            }
            function isNumberic(id,valid_id)
            {
                numbericExpression = /^[0-9]+$/;
                if(numbericExpression.test(document.getElementById(id).value))
                    document.getElementById(valid_id).src="Resources/checked.jpg";
                else
                    {
                        document.getElementById(id).value="";
                    
                    document.getElementById(valid_id).src="Resources/unchecked.jpg";
                    }
	
            }
            
            function visiblePaymentInput(choose_id,id)          
            {
                item=document.getElementById(id);
                if(document.getElementById(choose_id).value=="1")                   
                    item.style.display="block";
                else
                   item.style.display="none";
            }
            
            function autoRemember()
            {
                document.getElementById("user").value="<%=  register.getUsername() %>";
                document.getElementById("email").value="<%= register.getEmail()  %>";
                document.getElementById("phonenum").value="<%= register.getPhonenumber()  %>";
                document.getElementById("add").value="<%=  register.getAddress() %>";
                document.getElementById("firstnameid").value="<%= register.getFirstname()  %>";
                document.getElementById("lastnameid").value="<%= register.getLastname()  %>";
                document.getElementById("year").value="<%=  register.getYear() %>";
                document.getElementById("answer").value="<%= register.getAnswer() %>";
               
            }
        </script>
        
       
    </head>
    <body onload="autoRemember()">
        <form  action="registerServlet" method="POST">	
            
            <ul class="warning-content">
            <%
                for(int i=0;i<register.getProblemList().size();i++){
            %>
            <li ><%= register.getProblemList().get(i) %>
            <%}%>
            </ul>

            <table class="valid_table">
                <tr>
                    <td id="warning"></td>
                </tr>
                <tr>
                    <td id="username_valid"></td>
                    <td id="city_valid"></td>
                </tr>
                <tr>
                    <td id="password_valid"></td>
                    <td id="phonenumber_valid"></td>
                </tr>
                <tr>
                    <td id="email_valid"></td>
                    <td id="question_valid"></td>
                </tr>
                <tr>
                    <td id="address_valid"></td>
                    <td id="answer_valid"></td>
                </tr>
            </table>
            <table  class="register-table">          
                <tr class="register-title">
                    <td>Ðăng kí</td>
                </tr>
				
				<tr class="register-header">
                                <td></td>
				<td>Các dòng với dấu <small style="color:#FF0000">*</small> là bắt buộc</td>
				</tr>
                                <tr><td></td></tr>
                                
                <tr>
                    <td class="re-normaltext">Tên tài khoản(8-32 kí tự)<small style="color:#FF0000">*</small>: </td>
                    
                    <td class="re-input"><input maxlength="32" type="text" name="username"  id="user"
                                                onchange="isInrange('user','8','32','user_valid_id')"
                                                onblur="isInrange('user','8','32','user_valid_id')" 
                                                onkeydown="limit_text(user,32)" />
                        <img  src="" id="user_valid_id" height="10px" width="10px" ></td>
                    
					<td class="re-normaltext">Địa chỉ:<small style="color:#FF0000">*</small> </td>
                                        <td class="re-input"><input maxlength="99" type="text" name="address" id="add" 
                                                onchange="isempty('add','address_valid_id')"
                                                onblur="isempty('add','address_valid_id')"
                                                 />
                        <img  src="" id="address_valid_id" height="10px" width="10px" >
                        <br/><div class="register_note">VD : 51/9c Lê Đức Thọ, F.13 , Q.Gò Vấp</div>
                    </td>
                </tr>
				                <tr>
                    <td class="re-normaltext">Mật mã (8-32 kí tự):<small style="color:#FF0000">*</small> </td>
                    <td class="re-input"><input maxlength="32" type="password" name="password" id="passw" oncopy="return false;" onpaste="return false;" oncut="return false;"  

                                                onkeydown="limit_text(passw,32)"
                                                onkeyup="limit_text(passw,32)"
                                                onblur="isInrange('passw','8','32','password_valid_id')"
                                                onchange="isInrange('passw','8','32','password_valid_id')"/>
                    <img  src="" id="password_valid_id" height="10px" width="10px" >
                    </td>
					<td class="re-normaltext">Số điện thoại:<small style="color:#FF0000">*</small>                                
                                        </td>
                                        <td class="re-input"><input maxlength="11" type="text" name="phonenumber" id="phonenum" 
                                                onkeydown="limit_text(phonenum,11)"
                                                onkeyup="limit_text(phonenum,11)"                                                                                
                                                onblur="isNumberic('phonenum','phone_valid_id')">
                                              
                    <img  src="" id="phone_valid_id" height="10px" width="10px" >
                    <br/><div class="register_note">VD : 0983746056</div>
                    </td>
                </tr>
				                <tr>
                    <td class="re-normaltext">Nhập lại mật mã:<small style="color:#FF0000">*</small></td>
                    <td class="re-input"><input type="password" name="retype-password" id="retype_passw"
                                                onblur="checkRetype('passw','retype_passw','retypepass_valid_id')"
                                                onchange="checkRetype('passw','retype_passw','retypepass_valid_id')"/>
                    <img  src="" id="retypepass_valid_id" height="10px" width="10px" >
                    </td>
					<td class="re-normaltext">Thành phố:<small style="color:#FF0000">*</small></td>
                    <td class="re-input">
                        <user:CitySelector_K city="<%= register.getCity()%>" />
                	</select></td>
					
                </tr>

				                <tr>
                    <td class="re-normaltext">Email:<small style="color:#FF0000">*</small> </td>
                    <td class="re-input"><input maxlength="50" type="text" name="email" id="email"  oncopy="return false;" onpaste="return false;" oncut="return false;"
                                                onblur="checkEmail('email','email_valid_id')"
                                                onchange="checkEmail('email','email_valid_id')"/>
                    <img  src="" id="email_valid_id" height="10px" width="10px" >
                    <br/><div class="register_note"> VD : greenbook@yahoo.com</div>
                    </td>
					<td class="re-normaltext">Ngày sinh:</td>
                                        <td>
                                        <table>
                                           
                 <tr>
                 
                    <td>Ngày</td>
                    <td>Tháng</td>
                    <td>Năm <i>(từ 1912-2002)</i></td>
                </tr>
                                        <tr>
                                            <td><user:DaySelector day="<%=register.getDay()%>"/> </td>
                                            <td><user:MonthSelector month="<%= register.getMonth() %>"/>
                                            </td>
                    
                                            <td class="re-input"><input  type="text" name="year" id="year"
                                                                          onblur="check_RealYear('year','year_valid_id')"/>
                                            <img  src="" id="year_valid_id" height="10px" width="10px" ></td>
                                       </tr>
                                       </table>
                                        </td>
                </tr>
				                <tr>
                    <td class="re-normaltext">Nhập lại Email:<small style="color:#FF0000">*</small> </td>
                    <td class="re-input"><input  type="text" name="retype-email" id="retype_email"                                          
                                                onblur="checkRetype('email','retype_email','retyemail_valid_id')"
                                                onchange="checkRetype('email','retype_email','retyemail_valid_id')"/>
                                  
                     <img  src="" id="retyemail_valid_id" height="10px" width="10px" >
                    </td>
					<td class="re-normaltext">Câu hỏi bí mật:<small style="color:#FF0000">*</small></td>
                                        <td class="re-input">
                                            <user:QuestionSelector question="<%= register.getQuestion()%>"/>
                                        </td>
                </tr>
				                <tr>
                    <td class="re-normaltext">Tên: </td>
                    <td class="re-input"><input maxlength="20" type="text" name="firstname"  id="firstnameid"/></td>
					<td class="re-normaltext">Câu trả lời:<small style="color:#FF0000">*</small></td>
                                        <td class="re-input"><input maxlength="50" type="text" name="answer"  id="answer"
                                                                    onblur="isInrange('answer',6,50,'answer_valid_id')"
                                                                    onchange="isInrange('answer',6,50,'answer_valid_id')"/>
                                         <img  src="" id="answer_valid_id" height="10px" width="10px" >
                                        </td>
                </tr>
				                <tr>
                    <td class="re-normaltext">Họ và tên lót: </td>
                    <td class="re-input"><input maxlength="20" type="text" name="lastname" id="lastnameid" /></td>
	
                    <td class="re-normaltext">Giới tính: </td>
                    <td class="re-input">
                        <user:SexSelector  sex="<%= register.getSex()%>"/>
					<!--<select name="sex" id="sexid">
                    <option value="">Chọn giới tính</option>
                    <option value="1">Nam</option>
                    <option value="0">Nữ</option>
                	</select>--></td>
                </tr>
                <tr class="register-title">
				<td>Thông tin cho việc thanh toán</td>
				</tr>
				
                <tr>
                    <td class="re-normaltext">Hình thức thanh toán :</td>
                    <td class="re-input"><select name="payment_style" id="payment_sty" 
                                                 onmousedown="visiblePaymentInput('payment_sty','paymentaccount')"
                                                 onmouseup="visiblePaymentInput('payment_sty','paymentaccount')">
                    <option value="">Chọn cách thanh toán</option>
                    <option value="0">Trực tiếp, tại nhà của quí khách</option>
                    <option value="1">Tài khỏan Paypal</option>
                </select>
				</td>
				</tr>
                                <tr>
                                    <td></td>
                                    <td>
                                <table class="paymentAccount" id="paymentaccount" style="display: none">
                                <tr >
				<td class="re-normaltext">Paypal Account:</td>
				<td class="re-input"><input type="text" name="account_ID" /></td>
                                </tr>
                                <tr>
				<td class="re-normaltext">Postal code:</td>
				<td><input type="password" name="postal_code"/></td>
				</tr>
                                </table>
                                    </td>
                                </tr>
                        <tr class="register-title">
				<td>Mã xác nhận</td>
                </tr>
                <tr>
                    <td></td>
              
                    <td id="refesh_test"><img id="captcharImg" src="http://localhost:8080/GrrenBookOnline_OnlineProject/captCharServlet" height="100px" width="200px"></td>
                                
                </tr>
                <tr>
                    <td></td>
                    <td><input type="text" name="confirm_code" id="test" /></td>
                </tr>
                <tr class="agree">
                   <td></td>
                    <td>Tôi đồng ý với những qui định của gian hàng</td>
                </tr>
                                
                <tr class="agree">
                    <td></td>
                    <td><input class="submitbutton" type="submit" value="Hoàn tất việc đăng kí" name="re-submit"  /></td>
                </tr>
            </table>
              
        </form>
    </body>
</html>
